<section class="col-md-4 offset-md-4 col-8 offset-2 box-shadow-2 p-0">
    <div class="card border-grey border-lighten-3 px-2 py-2 row mb-0">
        <div class="card-header no-border pb-0">
            <div class="card-title text-center">
                <img src="../../../app-assets/images/logo/logo-dark.png" alt="branding logo">
            </div>
            <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Easily Using</span></h6>
        </div>
        <div class="card-content">
            <div class="text-center">
                <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
            </div>
            <p class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-2"><span>OR Using Account Details</span></p>
            <div class="card-body pt-0">
                <form class="form-horizontal" action="index.html" novalidate>
                    <fieldset class="form-group position-relative has-icon-left">
                        <input type="text" class="form-control" id="user-name" placeholder="User Name">
                        <div class="form-control-position">
                            <i class="la la-user"></i>
                        </div>
                    </fieldset>
                    <fieldset class="form-group position-relative has-icon-left">
                        <input type="email" class="form-control" id="email" placeholder="Your Email Address" required>
                        <div class="form-control-position">
                            <i class="la la-envelope-o"></i>
                        </div>
                    </fieldset>
                    <fieldset class="form-group position-relative has-icon-left">
                        <input type="password" class="form-control" id="user-password" placeholder="Enter Password" required>
                        <div class="form-control-position">
                            <i class="la la-key"></i>
                        </div>
                    </fieldset>
                    <button type="submit" class="btn btn-info btn-block">Register</button>
                </form>
            </div>
        </div>
        <div class="card-footer pb-0">
            <p class="text-center"><a href="recover-password.html" class="card-link">Recover password</a></p>
            <p class="text-center">Already have an account ? <a href="login-with-navbar.html" class="card-link">Login</a></p>
        </div>
    </div>
</section>
